<template>
	<view>
		<u-navbar title="丰卖商城" :bgColor="bgColor" :titleStyle="titleStyle">
		</u-navbar>
		<u-swiper :list="banner1" keyName="image" duration="2000" :circular="true" height="200"></u-swiper>
		<u-notice-bar :text="noticeContent" mode="closable" speed="150" url="/pages/componentsB/tag/tag"></u-notice-bar>
<!-- 		<u-grid :border="false">
			<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
				<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
				<text class="grid-text1">{{baseListItem.title}}</text>
			</u-grid-item>
		</u-grid> -->
		<u-grid :col="5" :border="false">
			<u-grid-item v-for="(item,index) in cateList" :key="index">
				<image :src="item.cateImg" class="img-80 u-border u-border-radius-big u-p-10"></image>
				<text class="grid-text">{{item.cateTitle}}</text>
			</u-grid-item>
		</u-grid>
		
		<u-search placeholder="请输入商品名称..." v-model="keyword" :animation="true" shape="square" class="px-20"></u-search>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: '#001f3f',
				titleStyle: {
					color: '#ffffff'
				},
				// bgColor: {
				// 	backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				// }
				banner1: [{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '1'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '2'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '3'
				}, ],
				banner: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				noticeContent: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				baseList: [{
						name: 'photo',
						title: '图片'
					},
					{
						name: 'lock',
						title: '锁头'
					},
					{
						name: 'star',
						title: '星星'
					},
				],
				cateList: [{
					cateId: '1',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/01f957cd788e2cefb6991a15dab88176.png',
					cateTitle: '交互设计'
				},{
					cateId: '2',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/67c387777fbf4e93c34039e906fe8c12.png',
					cateTitle: '视觉设计'
				},{
					cateId: '3',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/01f957cd788e2cefb6991a15dab88176.png',
					cateTitle: 'APP设计'
				},{
					cateId: '4',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/67c387777fbf4e93c34039e906fe8c12.png',
					cateTitle: '小程序'
				},{
					cateId: '5',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/01f957cd788e2cefb6991a15dab88176.png',
					cateTitle: '网站模板'
				},{
					cateId: '6',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/67c387777fbf4e93c34039e906fe8c12.png',
					cateTitle: '短视频'
				},{
					cateId: '7',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/01f957cd788e2cefb6991a15dab88176.png',
					cateTitle: '引流广告'
				},{
					cateId: '8',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/67c387777fbf4e93c34039e906fe8c12.png',
					cateTitle: '网络安全'
				},{
					cateId: '9',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/01f957cd788e2cefb6991a15dab88176.png',
					cateTitle: '服务器'
				},{
					cateId: '10',
					cateImg: 'https://www.onenessxy.com/uploads/20210727/67c387777fbf4e93c34039e906fe8c12.png',
					cateTitle: '商务合作'
				}],
				keyword: ''
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.u-p-10 {
		padding: 10rpx;
	}
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	
	.grid-text1 {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>
